<template>
  <div>
    <div style="display: flex">
      <a-button size="large" class="editable-add-btn" @click="commodityVisible = true; title = '添加商品'">
        <a-icon type="plus"/>
        新增商品
      </a-button>
      <a-input-search
          v-model="keyword"
          placeholder="请输入商品名"
          enter-button="搜索商品"
          style="width: 400px;margin-left: 20px"
          size="large"
          @search="onSearch"
      />
      <a-button style="margin-left: 10px" size="large" type="danger" @click="reset">
        重置
      </a-button>
    </div>
    <a-table :loading="loading" :columns="columns" :data-source="data" rowKey="id">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> 商品名称</span>
      <span slot="action" slot-scope="text, record, index">
        <a-button @click="handleUpdate(record)" type="link"><a-icon type="edit"/></a-button>
<!--        <a-button @click="handleDelete(record, index)" type="link"><a-icon type="delete"/></a-button>-->
      </span>
    </a-table>

    <a-modal
        :title=title
        :closable="false"
        :visible="commodityVisible"
    >
      <a-form-model ref="commodityForm" :model="changeCommodity" :rules="rules">
        <a-form-model-item ref="name" label="商品名称" prop="name">
          <a-input v-model="changeCommodity.name"/>
        </a-form-model-item>
        <a-form-model-item label="商品单价" prop="price">
          <a-input-number id="input" v-model="changeCommodity.price" :min="1"/>
        </a-form-model-item>
        <a-form-model-item label="描述信息" prop="description">
          <a-input v-model="changeCommodity.description" type="textarea" placeholder="商品简介"/>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" @click="handleBack">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="modalLoading" @click="submitCommodity">
          确定
        </a-button>
      </template>
    </a-modal>

  </div>
</template>

<script>
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '库存数量',
    dataIndex: 'count',
    key: 'age',
  },
  {
    title: '描述信息',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'address',
  },
  {
    title: '商品单价',
    key: 'price',
    dataIndex: 'price',
    scopedSlots: {customRender: 'tags'},
  },
  {
    title: '更多操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];

export default {
  name: "BasCommodity",
  data() {
    return {
      changeCommodity: {
        name: '',
        description: '',
        count: 0,
        price: 1.00,
      },
      loading: false,
      modalLoading: false,
      commodityVisible: false,
      commodityLoading: false,
      data: [],
      columns,
      title: '',
      keyword: '',
      rules: {
        name: [{required: true, message: '请输入商品名称', trigger: 'blur'}]
      }
    };
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    onSearch() {
      if (this.keyword === '') {
        this.$message.warning('请输入搜索内容')
      } else {
        this.loadTableData()
      }
    },
    reset() {
      this.keyword = ''
      this.loadTableData()
    },
    loadTableData() {
      this.loading = true
      this.getRequest('/api/commodity/?name=' + this.keyword).then(resp => {
        if (resp) {
          if (this.keyword !== '' && resp.length === 0) this.$message.warning('未搜索到相关商品')
          this.loading = false
          this.data = resp
        }
      })
    },
    submitCommodity() {
      this.$refs.commodityForm.validate(valid => {
        if (valid) {
          this.modalLoading = true
          if (this.title === '添加商品') {
            this.postRequest('/api/commodity/', this.changeCommodity).then(resp => {
              if (resp) {
                this.modalLoading = false
                this.commodityVisible = false
                this.loadTableData()
              } else {
                this.modalLoading = false
              }
              this.changeCommodity = {
                name: '',
                description: '',
                count: 0,
                price: 1.00,
              }
            })
          } else {
            this.putRequest('/api/commodity/', this.changeCommodity).then(resp => {
              if (resp) {
                this.modalLoading = false
                this.commodityVisible = false
                this.loadTableData()
              } else {
                this.modalLoading = false
              }
              this.changeCommodity = {
                name: '',
                description: '',
                count: 0,
                price: 1.00,
              }
            })
          }
        }
      })
    },
    handleDelete(r, index) {
      this.$confirm('此操作将永久删除商品' + r.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/api/commodity/' + r.id).then(resp => {
          if (resp) {
            this.loadTableData()
          }
        })
      }).catch(() => {
        this.$message.info('取消删除')
      });
    },
    handleUpdate(record) {
      this.title = '编辑商品'
      this.changeCommodity = record
      this.commodityVisible = true
    },
    handleBack() {
      this.commodityVisible = false;
      this.$refs.commodityForm.resetFields()
      this.loadTableData()
      this.changeCommodity = {
        name: '',
        description: '',
        count: 0,
        price: 1.00,
      }
    }
  },
};
</script>

<style scoped>
.editable-add-btn {
  margin-bottom: 15px;
}
</style>